<!DOCTYPE html>
<!-- saved from url=(0026) -->
<!--引入模板链接-->
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>官方预约平台 - 无忧体检网</title>
    <meta name="description" content="无忧体检中心官方预约平台 - 无忧体检网">
    <meta name="keywords" content="体检，体检中心，无忧体检预约">

    <!--    导入elementui vue.js-->
    <link rel="stylesheet" th:href="@{/elementui/index.css}">
    <script th:src="@{/elementui/vue.js}"></script>
    <script th:src="@{/elementui/index.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>


    <link href="css/reset.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/calendar.css">
    <link href="css/swiper-3.2.7.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <link href="css/jingmei.css" rel="stylesheet">
    <link href="css/pspecial.css" rel="stylesheet">
    <link href="css/logon_new.css" rel="stylesheet">
    <!--—[if lt IE 9]-->
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <!--[endif]—-->
    <link type="text/css" rel="stylesheet" href="css/laydate.css">
    <link type="text/css" rel="stylesheet" href="css/laydate_new.css" id="LayDateSkin">
</head>

<body>
<div id="app">
    <!-- Header  -->
    <div class="header header_index">
        <div class="container head clear">
            <div class="headleft fl">
                <ul class="clear">
                    <li class="fl"><a href="#">预约中心首页</a></li>
                    <li class="fl"><a href="#">体检</a></li>
                    <li class="fl"><a href="#">检前</a></li>
                    <li class="fl"><a href="#">检后</a></li>
                </ul>
            </div>
            <div class="fr headright clear">
                <div class="logintips fl">
                    <a href="/toPage/login" rel="nofollow" v-if="loginUser==null">请登录</a>
                    <span class="line" v-if="loginUser==null">|</span>
                    <a href="/toPage/register" rel="nofollow" v-if="loginUser==null">免费注册</a>
                    <a href="/toPage/Personal" rel="nofollow" v-if="loginUser!=null">个人中心</a>
                    <el-dropdown v-if="loginUser!=null">
  <span class="el-dropdown-link">
    退出<i class="el-icon-s-tools"></i>
  </span>
                        <el-dropdown-menu slot="dropdown">
                            <span style="display:block;"><a href="#" @click="logout()">退出登录</a></span>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="mainnav container clear">
            <div class="logo fl clear">
                <a href="#" class="fl"><img src="img/big_logo.png" class="full"></a>
            </div>
            <div class="choose fl clear">
                <div class="select_box fl clear">
                    <div class="search-dq clear">
                        <div class="search_fill fl">
                            <span class="fr num"><img src="img/sousuo.png" class="full"></span>
                        </div>
                    </div>
                </div>
                <div class="search fl clear">
                    <div class="searchbox clear">
                        <span class="searchicon"><img src="img/search.png"></span>
                        <input type="text" name="search_key" class="search_input fl" value="" placeholder="请输入体检套餐">
                        <input type="submit" value="搜 索" id="btn_search" name="btnSearch" class="fl btn_search yf-js-keyword">
                    </div>
                    <div class="searchlink">
                        <ul class="clear">
                            <li><a href="#">入职体检</a></li>
                            <li><a href="#">员工体检</a></li>
                            <li><a href="#">父母尊享</a></li>
                            <li><a href="#">妇科检查</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="navbar navbar_check1 clear">
            <div class="container clear">
                <div class="quick_check1 fl">
                    <p class="quickchoose">体检预约中心</p>
                </div>
                <ul class="ul fl clear nav">
                    <li><a href="/">首页</a></li>
                    <li><a href="#">套餐选取</a></li>
                    <li><a href="#">医师服务</a></li>
                    <li><a href="#">高端检验</a></li>
                    <li><a href="#">员工团检</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Header End -->
    <div class="container">
        <!-- 面包屑 -->
        <div class="content content_where">
            <span>您当前位置 ：
                <a href="#" class="b_blue">首页</a>&gt;&gt;
                <a href="#" class="b_blue">体检套餐</a>&gt;&gt;
                <a href="javascript:;" th:text="${info.name}">入职体检-男</a>
            </span>
        </div>
        <!-- 面包屑  End-->
        <!-- 展示栏位 -->
        <div class="product_info mt20 clear">
            <div class="pro_left fl">
                <div class="pro_pic">
                    <img th:src="@{${info.img}}" src="img/list.jpg" class="full">
                </div>
                <div class="share clear">
                    <p class="fl identifier">套餐编号：<span>TC0001234</span></p>
                </div>
            </div>
            <div class="pro_right fl">
                <h1>
                    <p class="pro_name"><a th:text="${info.name}">入职体检-男</a><span>[来院需持有24小时核酸检测报告]</span></p>
                </h1>
                <p class="pro_intro" th:text="${info.remark}">此套餐为入职体检，对心肺、血尿常规、肝功肾功等进行健康筛查。</p>
                <div class="pro_all_money clear">
                    <div class="fl b_orange clear">
                        <p class="fl">
                            <span class="mom">￥</span>
                            <span class="mom hidemoney" th:text="${info.price}">1280.00</span>
                        </p>
                        <p class="mem-price fl">
                            <span class="bot"></span> 售价
                        </p>
                    </div>
                    <div class="fl f12 mlr hidedel">
                        <span class="del_mom" th:text="${info.price}*2">2480.90</span>
                    </div>
                    <div class="fl mlr align_height">
                        已售：
                        <span class="sell_num" >134</span>
                    </div>
                </div>
                <div class="cart mt20">
                    预约医生：
                    <select id="doctor" style="height: 30px;width: 100px;" onchange="changeDoctor(this)">
                        <option th:each="item,itemStats:${doctors}" th:text="${item.name}" th:value="${item.id}"></option>
                    </select> &nbsp;&nbsp;&nbsp; 预约日期：
                    <select id="date" style="height: 30px;width: 100px;" onchange="changeDate(this)">
                        <option>请选择时间</option>
                    </select> &nbsp;&nbsp;&nbsp;
                    <a data-id="19614" class="add_cart" th:onclick="'yuyue('+${info.id}+')'">立即预约</a>
                </div>
                <div class="prompt-box mt20">
                    <p>体检时间：周一至周日8:00-12:00，14:00-17:00</p>
                    <p>预约须知：法定节假日除外</p>
                    <p>
                        <div class="promiss clear">
                            <ul class="clear fl">
                                <li class="fl promiss2">品质保证</li>
                                <li class="fl promiss2">院方授权</li>
                                <li class="fl promiss2">检前指导</li>
                                <li class="fl promiss2">报告专解</li>
                            </ul>
                        </div>
                </div>
                </p>
            </div>
        </div>
        <!-- 展示栏位 End -->
        <!-- 信息栏 -->
        <div class="pro_main clear mt20">
            <div class="main_left fl" style="position: absolute; left: 945px;">
                <div class="pro_show">
                    <h1>热销推荐</h1>
                    <div class="pro_show_list">
                        <a th:each="item,itemStat:${setMealList}" th:href="@{${'/set-meal?id='+(item.id)}}" class="pos-relate set_detail fl" style="margin-left: 0px;">
                            <img th:src="@{${item.img}}" src="img/list.jpg" class="full">
                            <p class="intro-content" th:text="${item.remark}">
                                针对各年龄段成年人的常规体检方案，检查的重点是心肺、肝胆胰脾肾、甲状腺、颈椎、前列腺等重要器官，对高血压、高血脂、高血糖、常见肿瘤、胃肠疾病、幽门螺杆菌进行健康初筛和预防。
                            </p>
                            <p class="set-name" th:text="${item.name}">基础体检套餐(男)</p>
                            <div class="money clear">
                                <p class="fl"><span class="b_orange f16" th:text="${item.price}">￥1280.00</span></p>
                                <span class="money_del fl" th:text="${item.price}*2">原价：2334.00</span>
                                <p class="fr">已售：<span class="b_orange" th:text="${item.sales}">164</span></p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="main_right ">
                <div class="fix_nav"></div>
                <ul class="clear right_nav">
                    <li class="fl active">套餐详情</li>
                </ul>
                <div class="right_main mt20">
                    <div class="pro_tab_show">
                        <div class="msg_jichu mt20">
                            <h1>基本信息</h1>
                            <div class="msg-width">
                                <table height="96">
                                    <colgroup>
                                        <col width="278">
                                        <col width="318">
                                        <col width="343">
                                    </colgroup>
                                    <tbody>
                                        <tr height="23" class="firstRow">
                                            <td class="tabletd" x:str="" height="17" width="290.6666666666667">
                                                <a th:text="${info.name}">商品名称：普通入职体检套餐</a></td>
                                            <td class="tabletd" x:str="" height="17" width="254.66666666666669">
                                                套餐类型：入职体检</td>
                                            <td class="tabletd" x:str="" height="17" width="349">
                                                <p>预约方式：网上预约</p>
                                            </td>
                                        </tr>
                                        <tr height="23">
                                            <td class="tabletd" x:str="" height="17" width="304">适用性别：
                                                <!--由于数据库判断性别使用数字,所以这里需要对数字进行判断-->
                                                <a th:if="${info.sex}==0">均可</a>
                                                <a th:if="${info.sex}==1">男</a>
                                                <a th:if="${info.sex}==2">女</a>
                                                &nbsp;</td>
                                            <td class="tabletd" x:str="" height="17" width="254.66666666666669">适用年龄：
                                                <a th:text="${info.age}">成年</a>
                                            </td>
                                            <td class="tabletd" x:str="" height="17" width="349">使用期限：有效期至医院套餐更 &nbsp; &nbsp;&nbsp;</td>
                                        </tr>
                                        <tr height="50">
                                            <td class="tabletd" colspan="3" x:str="" height="37" width="802">
                                                <p th:text="${info.remark}">适用人群：此套餐为入职体检，对心肺、血尿常规、肝功肾、血尿常规、肝功肾功等进行健康筛查。
                                                </p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <p><br></p>
                            </div>
                        </div>
                        <div class="msg_jichu mt20">
                            <h1>检测详情</h1>
                            <div class="msg_jichu mt20">
                                <table>
                                    <tbody>
                                        <tr class="firstRow">
                                            <td class="tabletd" width="25%">项目</td>
                                            <td class="tabletd">指标意义</td>
                                            <!-- <td width="20%"></td> -->
                                        </tr>
                                        <div th:each="group,gStat:${info.checkGroups}">
                                            <tr class="">
                                                <td colspan="2" class="tabletd" th:text="${group.name}">检测组</td>
                                            </tr>
                                            <tr class="" th:each="item,itemStat:${group.checkItems}">
                                                <td class="tabletd" th:text="${item.name}">检测项</td>
                                                <td class="tabletd" th:text="${item.remark}">描述</td>
                                                <!-- <td class="tabletd"></td> -->
                                            <tr>
                                        </div>

                                            <td colspan="3"></td>
                                        </tr>
                                        <tr class="">
                                            <td colspan="3" class="tabletd">其他项目</td>
                                        </tr>
                                        <tr class="">
                                            <td class="tabletd">个检报告</td>
                                            <td class="tabletd" colspan="2">个检报告</td>
                                            <!-- <td class="tabletd"></td> -->
                                        </tr>
                                        <tr>
                                            <td colspan="2"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="pro_tab_show">
                        <div class="msg_jichu mt20">
                            <h1>预定须知</h1>
                            <div class="pro_detail">
                                <table class="combo-detail-info-tb" border="0" cellspacing="0" cellpadding="0">
                                    <tbody>
                                        <tr>
                                            <td valign="top" class="first-td" width="100" style="color: rgb(247, 150, 70);border-bottom:none; ">价格说明</td>
                                            <td width="640" style="border-bottom:none; ">
                                                <font style="color: rgb(247, 150, 70);">划线价：</font>
                                                商品展示的划横线价格为参考价，该价格是体检门市价或项目组成套餐价，该价格仅供您参考。<br>
                                                <font style="color: rgb(247, 150, 70); ">售价：</font>
                                                本网所有商品标注的售价，均为相应商品的实际售价，即您在决定购买时需要最终支付的实际价格。
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                    <div class="pro_tab_show org_border mt20">
                        <div class="org_change_list">
                            <div class="org_intro_list">
                                <h3>套餐评论</h3>
                                <div class="org_intro_content">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 信息栏 End -->
    </div>
    <!-- Footer -->
    <div class="footer">
        <div class="container clear">
            <div class="footerdetail clear fl">
                <div class="footerlist fl">
                    <a href="javascript:;" class="footertitle" rel="nofollow">关于我们</a>
                    <ul>
                        <li><a href="#" rel="nofollow">平台简介</a></li>
                        <li><a href="#" rel="nofollow">招贤纳士</a>
                        </li>
                        <li><a href="#" rel="nofollow">联系我们</a>
                        </li>
                    </ul>
                </div>
                <div class="footerlist fl">
                    <a href="javascript:;" class="footertitle" rel="nofollow">售后服务</a>
                    <ul>
                        <li><a href="#" rel="nofollow">退款说明</a></li>
                        <li><a href="#" rel="nofollow">检后服务</a>
                        </li>
                        <li><a href="#" rel="nofollow">监督电话</a>
                        </li>
                    </ul>
                </div>
                <div class="footerlist fl">
                    <a href="javascript:;" class="footertitle" rel="nofollow">常见事项</a>
                    <ul>
                        <li><a href="#" rel="nofollow">检前须知</a>
                        </li>
                        <li><a href="#" rel="nofollow">预约流程</a>
                        </li>
                        <li><a href="#" rel="nofollow">体检流程</a>
                        </li>
                    </ul>
                </div>
                <div class="footerlist fl">
                    <a href="javascript:;" class="footertitle" rel="nofollow">新手指南</a>
                    <ul>
                        <li><a href="#" rel="nofollow">会员注册</a></li>
                        <li><a href="#" rel="nofollow">用户登录</a></li>
                        <li><a href="#" rel="nofollow">找回密码</a></li>
                    </ul>
                </div>
                <div class="footerlist fl">
                    <a href="javascript:;" class="footertitle" rel="nofollow">机构对接</a>
                    <ul>
                        <li><a href="#" rel="nofollow">渠道合作</a>
                        </li>
                        <li><a href="#" rel="nofollow">机构入驻</a>
                        </li>
                        <li><a href="#" rel="nofollow">广告服务</a>
                        </li>
                    </ul>
                </div>
                <div class="code_nav fr clear">
                    <p class="fl">持续技术支持</p>
                    <img src="img/yg.png" class="full fl">
                </div>
            </div>
            <div class="footernum telnum fl">
                <p class="clear"><span class="fl">无忧体检</span></p>
                <h1>官方预约平台</h1>
            </div>
        </div>
        <div class="footerlink container">
            <div class="footercopy">
                <p><br>
                    <span>猿谷网络提供技术支持 @ DancingHorse600</span>
                </p>
                <p>apevale.com</p>
            </div>
        </div>
    </div>
</div>
    <!--Footer End  -->

    <script src="js/crypto-aes.js"></script>
    <script src="js/crypto-mode-ecb.js"></script>
    <script src="js/crypto-pad-nopadding.js"></script>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/swiper-3.2.7.jquery.min.js"></script>
    <script src="js/calendar.js"></script>
    <script src="js/commonLib.js"></script>
    <script src="js/main.js"></script>
    <script src="js/jquery.include.js"></script>

    <script>
        var vue = new Vue({
            el: '#app',
            data: {
                loginUser: {},
            },
            created() {
                this.loginUser = JSON.parse(sessionStorage.getItem("loginUser"))
                if(this.loginUser==null){
                    window.location.href = "/toPage/login.html"
                }
            },
            methods: {
                logout(){
                    sessionStorage.clear()
                    window.location.href = "/"
                }
            }
        })
    </script>

    <script>
        $(function() {
            $('.yf-js-keyword').click(function(e) {
                var keyword = $('input[name=search_key]').val();
                if (keyword == '' || keyword == null || keyword == undefined) {
                    return;
                }
                var type = $('input[name=searchType]').val();
                var url = '/shop/index/search?k=';
                url += encodeURI(keyword);
                location.href = url;
            });
        });

        function changeDoctor(obj) {
            const dockerId = (obj.options[obj.selectedIndex].value);
            $("#date").children().remove();
            $("#date").append("<option value='-1'>请选择</option>");
            $.ajax({
                type: 'get',
                dataType: 'json',
                url: "/date?doctor=" + dockerId,
                success: function(resp) {
                    if (resp.code == 20000) {
                        resp.data.forEach(d => {
                            $("#date").append("<option value='" + d + "'>" + d + "</option>");
                        });
                    } else {
                        alert("医生已约满！");
                    }
                },
                error: function() {
                    alert("网络错误");
                    ck_phone = 0;
                }
            });
        }

        function changeDate(obj) {
            const date = (obj.options[obj.selectedIndex].value);

        }

        function yuyue(id) {
            const dockerId = $("#doctor").find("option:selected").val();
            const date = $("#date").find("option:selected").val();
            if (dockerId == -1) {
                alert("请选择预约医生!");
                return;
            }
            if (date == -1) {
                alert("请选择预约时间!");
                return;
            }
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: "/reservation?setmeal=" + id + "&doctor=" + dockerId + "&date=" + date,
                success: function(data) {
                    if (data.code == 20000) {
                        alert("预定成功！");
                    } else {
                        alert("用户未登录", "login", 2000);
                    }
                },
                error: function() {
                    alert("网络错误");
                    ck_phone = 0;
                }
            });
        }
    </script>
</body>

</html>